<template>
  <div :style="wrapStyle">
    <el-container>
      <Aside></Aside>
      <el-container id="container" direction="vertical">
        <Top id="top"></Top>
        <el-main>
          <el-card>
            <el-header>
              <div class="box3">
                <i class="el-icon-tickets"></i>
                <span class="span2">数据列表</span>
              </div>
              <el-button size="mini" @click="tadd" class="btn2" type="primary"
                >添加</el-button
              >
            </el-header>

            <!-- 表格部分 -->
            <el-table
              :data="
                tableData.slice(
                  (currentPage - 1) * pagesize,
                  currentPage * pagesize
                )
              "
              border
              style="width: 100%"
            >
              <el-table-column prop="id" label="ID" width="80" align="center">
              </el-table-column>
              <el-table-column
                prop="img"
                label="产品图"
                align="center"
                width="240"
              >
                <template v-slot:default="scope">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.img"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="商品名称"
                width="220"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="cell"
                label="价格"
                width="220"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="type"
                label="类型"
                width="220"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="num"
                label="数量"
                width="220"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="" label="编辑">
                <template v-slot:default="scope">
                  <el-button
                    @click="tadd(scope.$index + (currentPage - 1) * pagesize)"
                    type="primary"
                    size="small"
                    >编辑</el-button
                  >
                  <el-button
                    @click="
                      handleDelete(scope.$index + (currentPage - 1) * pagesize)
                    "
                    type="danger"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页部分 -->
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pagesize"
              layout="total,prev,pager,next"
              :total="tableData.length"
            >
            </el-pagination>
            <!-- 添加部分 -->
            <el-dialog
              title="商品信息"
              :visible.sync="dialogVisibleARR"
              width="40%"
              margin-top="none"
              id="dia"
            >
              <el-form :model="form" ref="ruleForm">
                <el-form-item label="ID" prop="id">
                  <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="产品图">
                  <el-input v-model="form.img"></el-input>
                </el-form-item>
                <el-form-item label="商品名称">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                  <el-input v-model="form.cell"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                  <!-- <el-input v-model="form.type"></el-input> -->
                  <el-select v-model="form.type" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="数量">
                  <el-input v-model="form.num"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleARR = false">取 消</el-button>
                <el-button type="primary" @click="bianji">确 定</el-button>
              </span>
            </el-dialog>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import axios from "axios";
import Aside from "@/components/Aside";
import Top from "@/components/Top";
export default {
  components: {
    Aside,
    Top,
  },
  data() {
    return {
      // 获取index值为-1
      bingindex: -1,
      fullscreen: false,
      dialogVisibleARR: false,
      // 分页的当前页数
      currentPage: 1,
      //分页的一页几条内容
      pagesize: 5,
      //自适应高度
      wrapStyle: {
        height: "",
      },
      //添加表单
      form: {
        id: "",
        img: "",
        name: "",
        cell: "",
        type: "",
        num: "",
      },
      //表格数据
      tableData: [],
      //下拉菜单
      value: "",
      options: [
        {
          value: "家庭用品",
          label: "家庭用品",
        },
        {
          value: "居家服装",
          label: "居家服装",
        },
        {
          value: "电子产品",
          label: "电子产品",
        },
      ],
    };
  },
  methods: {
    // 添加修改 不定参数
    tadd(...args) {
      this.dialogVisibleARR = true;
      if (typeof args[0] != "number") {
        this.form = {};
        console.log(this.bingindex);
      } else {
        this.bingindex = args[0];
        console.log(args[0]);
        for (let i in this.tableData[this.bingindex]) {
          this.form[i] = this.tableData[this.bingindex][i];
        }
      }
    },
    //清空数据
    clear() {
      this.form = {
        id: "",
        img: "",
        name: "",
        cell: "",
        type: "",
        num: "",
      };
    },
    // 编辑
    bianji() {
      this.dialogVisibleARR = false;
      if (this.bingindex == -1) {
        // 添加
        axios
          .post("http://127.0.0.1:3000/student", {
            student: this.form,
          })
          .then(() => {
            console.log(this.form);
            this.getTableList();
          })
          .catch((err) => {
            console.log(err);
          });
        // this.tableData.push(this.form);
        // console.log(this.form);
        this.form = {};
      } else {
        //编辑
        axios
          .put(`http://127.0.0.1:3000/student/${this.bingindex}`, {
            student: this.form,
          })
          .then(() => {
            this.getTableList();
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.clear();
    },
    //查询
    getTableList() {
      axios.get("http://127.0.0.1:3000/student").then((res) => {
        this.tableData = res.data;
        console.log(res);
      });
    },
    //删除
    handleDelete(i) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios.delete(`http://127.0.0.1:3000/student/${i}`).then(() => {
            this.getTableList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getHeight() {
      let height = document.documentElement.clientHeight;
      this.wrapStyle.height = `${height}px`;
    },
  },
  mounted() {
    this.getTableList();
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
};
</script>
<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
body {
  background-color: #e9eef3;
}
.el-aside {
  background-color: #2d353c;
  color: #333;
  text-align: left;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}
#container {
  margin-left: 200px;
}
.box3 {
  width: 130px;
  height: 50px;
  float: left;
  position: absolute;
}
.btn2 {
  position: relative;
  line-height: 50px;
  float: right;
  top: 15px;
}
#up {
  text-align: left;
}
.el-select {
  width: 100%;
}
.el-pagination {
  margin-top: 20px;
}
</style>
